<template>
  <div class="wrapper">
    <dx-header-bar title="资源信息"></dx-header-bar>
    <div class="row">
      <div class="col" v-for="(item, index) in menu"
           :key="index" @click="openPage(item)">
        <img class="icon" :src="item.icon">
        <div class="name">{{item.name}}</div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import { DxHeaderBar } from '@/components';
import iconBusiness from './r_customer.png';
import iconCustomer from './r_business.png';

export default {
  components: {
    DxHeaderBar
  },
  data() {
    return {
      menu: [
        { name: '客户信息', icon: iconCustomer, link: 'customer' },
        { name: '业务信息', icon: iconBusiness, link: 'business' }
      ]
    };
  },
  methods: {
    openPage(item) {
      this.$router.push({
        name: item.link,
        query: {
          timestamp: new Date().getTime()
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
  .row
    overflow : hidden

  .col
    float : left
    padding : 20px
    width : 25%
    text-align : center
    border-bottom : .5px solid #eee
    border-right : .5px solid #eee

  .icon
    display : block
    margin : 0 auto 10px
    height : 96px
    width : 96px

  .name
    font-size : 28px
</style>
